<template>
  <div class="arrow">
    <div
      v-for="(item, index) in stepList"
      :key="index"
      class="item"
      @click="chooseStep(item)"
    >
      <div
        :class="currentStep === item.step ? 'arrow-info-active' : 'arrow-info'"
      >
        {{ item.label }}
      </div>
      <div
        :class="
          currentStep === item.step ? 'arrow-right-active' : 'arrow-right'
        "
      />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    chooseStep(item) {
      // this.$emit("chooseStep", item);
    }
  },
  props: {
    stepList: Array,
    /* stepList: [
       {
         step: 1,
         label: "step1"
       },
       {
         step: 2,
         label: "step1"
       },
       {
         step: 3,
         label: "step1"
       },
       {
         step: 4,
         label: "step1"
       }
     ],
    */
    currentStep: Number // currentStep: 1
  }
};
</script>
<style lang="scss" scoped>
$height: 60px;
.arrow {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  height: $height;
  width: calc(100% - 30px);
  // background-color: red;
  > .item {
    flex-grow: 1;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    .arrow-info {
      background-color: #ebeaea;
      // min-width: 120px;
      padding: 0 40px;
      line-height: $height;
      text-align: center;
      overflow: hidden;
      width: 100%;
    }
    .arrow-right {
      display: inline-block;
      position: relative;
      width: 0px;
      height: 0px;
    }
    .arrow-right::after {
      background-color: #ebeaea;
      content: "";
      height: 43px;
      width: 43px;
      top: 8px;
      left: -23px;
      border-width: 1px 1px 0 0;
      border-color: #d7d7d7;
      border-style: solid;
      transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
      position: absolute;
    }

    .arrow-info-active {
      background-color: #2d8cf0;
      // min-width: 120px;
      padding: 0 40px;
      line-height: $height;
      color: white;
      text-align: center;
      overflow: hidden;
      width: 100%;
    }
    .arrow-right-active {
      display: inline-block;
      position: relative;
      width: 0px;
      height: 0px;
    }
    .arrow-right-active::after {
      background-color: #2d8cf0;
      content: "";
      height: 43px;
      width: 43px;
      top: 8px;
      left: -22px;
      border-width: 1px 1px 0 0;
      border-color: #d7d7d7;
      border-style: solid;
      transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
      position: absolute;
    }
  }
}
</style>
